<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>18-01走进前端工程化，掌握模块化</title>
</head>
<body>
    <div>

    </div>
    <script src="./commonJs/bundle.js"></script>
    <script>
        console.log("index加载了")
        /*
        1.什么是模块化?
        模块化是指将一个复杂的系统分解为多个模块,方便编码。
        2.为什么要用模块化?降低复杂性,降低代码耦合度,部署方便,提高效率。
        3.模块化的好处?
        a.避免命名冲突,减少变量空间污染 b.更好的分离代码,按需加载 c.更高复用性d.更高可维护牲
        
        */

        /*
        基础方法：1.封装函数。2.命名空间。3.立即执行函数
        1.封装函数
        function bindEvent(){
            //click,hover
        }
        2.命名空间
        var obj = {
            name:'dg'
        }
        3.立即执行函数
        (function(){

        })()
        */
       
        /*
        模块化规范
        1.CommonJs(运用在服务器端)(同步加载，如果请求文件较多，则倒置页面瘫痪)
        2.AMD（异步加载模块）(提前全部加载完成)(允许制定回调函数。等模块异步加载完成后即可调用回调函数)
        3.CMD
        4.Es6
        
        */
        // 1.CommonJs(运用在服务器端)
        //app.js(服务器端认识，浏览器不认识)-->工具转换-->bundle.js(浏览器认识的)
        // 2.AMD（异步加载模块）(提前全部加载完成)
        // 3.CMD(按需加载)
    </script>
</body>
</html>